import { useEffect, useMemo, useRef, useState } from "react";
import { Button, notification } from 'antd'
// import microApp from '@micro-zoe/micro-app'

import { useRouter, useSearchParams } from "@/router/hooks";
import styled from "styled-components";
import CodeEditor from "@/components/codemirror/CodeEditor";

const { sendMessageToApp, openModal, closeModal } = window.MFE
console.log(window.MFE, 'window.MFE === ');


const MicroHome = () => {
  const searchParams = useSearchParams()



  const initMicro = () => {
    window.MFE.app.addDataListener((res) => {
      const { data } = res
      console.log('应用3接收到数据', data)

      notification.success({
        message: `${data.to}: 接收到来自${data.from}的数据：${JSON.stringify(data)}`,
        duration: 5
      })
    })
    // function dataListener (data) {
    //   console.log('来自主应用的数据', data)
    // }

    // listenData(dataListener)
  }

  const toOpenModal = (data) => {
    openModal(data)
  }

  const sendMessage = () => {
    // to、from传子应用的标识，其他自行添加
    sendMessageToApp({ to: 'micro-app2', from: 'micro-app1', type: 'message', data: '这是应用1发送来的消息' })
  }
  const code = `
  window.MFE.app.addDataListener((res) => {
    const { data } = res
    console.log('接收到数据', data)
  })
  `
  const code2 = `
  // 打开html弹窗
  /**
   * @param {Object} data
   * @param {String} data.title 弹窗标题
   * @param {String} data.className 弹窗类名
   * @param {ReactNode} data.content 弹窗内容
   * @param {ReactNode} data.footer 弹窗是否可见,底部内容，当不需要默认底部按钮时，可以设为 footer: null
   * @param {Number} data.width 弹窗宽度
   * @param {Number} data.height 弹窗高度
   * @param {String} data.okText 确定按钮文字
   * @param {String} data.cancelText 取消按钮文字
   * @param {Function} data.onOk 点击确定按钮的回调，需要再调用closeModal关闭弹窗，否则不关闭
   * @param {Function} data.onCancel 点击取消按钮的回调
   * @param {Function} data.afterClose 弹窗关闭后的回调
   */
 const { openModal, closeModal } = window.MFE
 const onOk = () => { 
    console.log('ok');
    closeModal()
 }
 openModal({ title: 'html弹窗', content: <p style={{ color: 'red' }}>这是应用2的弹窗</p>, width: 600, height: 600, onOk }, onCancel: () => { console.log('cancel') }

  // 打开链接弹窗
 const { openModal } = window.MFE
 openModal({ type: 'link', url: window.location.origin, name: 'aaa', title: '链接弹窗', width: 600, height: 600 })
  `


  useEffect(() => {
    initMicro()
    return () => {
      // microApp.removeDataListener('micro-large-screen')
    }
  }, [])

  return <StyleWrap>
    <p>应用2</p>
    <div>示例代码</div>
    <CodeEditor value={code} height={'200px'} lang="json" readOnly />
    <Button className="ml-2" type="primary" onClick={() => toOpenModal({ title: 'html弹窗', content: <p style={{ color: 'red' }}>这是应用2的弹窗</p>, width: 600, height: 600, onOk: () => { console.log('ok'); closeModal() } })}>打开html弹窗</Button>
    <Button className="ml-2" type="primary" onCreated={() => console.log('micro-app元素被创建')} onError={(error) => handleError(error, 'micro-app3')} onClick={() => toOpenModal({ type: 'link', url: window.location.origin, name: 'aaa', title: '链接弹窗', width: '800px', height: '600px' })}>打开链接弹窗</Button>
    <CodeEditor value={code2} height={'500px'} lang="json" readOnly />
  </StyleWrap>;
}

const StyleWrap = styled.div`
  p {
    font-size: 20px;
    color: #fff;
    width: 100%;
    text-align: center;
  }
`

export default MicroHome;